<template>
  <div class="friend-update-list">
    <!--好友动态列表-->
    <div v-for="(item, index) in friendList" :key="index" class="friend-update-item">
      <SXQFriendUpdateItem
          :friend-update="item"
          :callback="callback"/>
      
      <!-- 删除按钮容器 -->
      <div v-if="showDelete" class="delete-btn-container">
        <Button type="error" ghost size="small" @click.stop="handleDelete(item.id)" class="delete-btn">
          <Icon type="md-trash" />
          删除
        </Button>
      </div>
    </div>
  </div>
</template>

<script>
import SXQFriendUpdateItem from "@/components/SXQ-FriendUpdateItem";

export default {
  name: "SXQ-FriendUpdateList",
  components: {SXQFriendUpdateItem},
  props: {
    callback: {
      type: Function,
      required: true
    },
    friendList: {
      type: Array,
      required: true
    },
    showDelete: {  // 添加新的prop
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleDelete(postId) {
      this.$emit('delete-post', postId);
    }
  }
}
</script>

<style scoped>
.friend-update-item {
  position: relative;
  margin-bottom: 16px;
}

.delete-btn-container {
  position: absolute;
  right: 10px;
  bottom: 45px; /* 调整这个值来控制与封面的距离 */
}

.delete-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  font-size: 12px;
  opacity: 0.8;
  transition: all 0.3s;
}

.delete-btn:hover {
  opacity: 1;
  transform: scale(1.05);
}
</style>